<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Sample034 - 选项卡公告栏</title>
		<link rel="stylesheet" type="text/css" href="css/basic.css" />
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<style type="text/css">
		.tab {
			width: 234px;
			height: auto;
			background: #FFF;
			border: 1px solid #E0E0E0;
			margin: 50px auto;
			position: relative;
		}
		
		.tab-title,
		.tab-content {
			margin: 0px;
			padding: 0px;
			width: 100%;
			list-style: none;
			overflow: hidden;
		}
		
		.tab-title {
			border: 1px solid #E0E0E0;
		}
		
		.tab-title>li {
			width: 42px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			font-size: 15px;
			border-bottom: 4px solid transparent;
			float: left;
			margin-right: 5px;
			cursor: context-menu;
		}
		
		.tab-title>li:last-child {
			margin-right: 0px;
		}
		
		.tab-content>li {
			width: 100%;
			height: 150px;
			position: absolute;
			left: 0px;
			top: 30px;
			display: none;
			border: 1px solid #E0E0E0;
			border-top: none;
			padding: 10px;
		}
		
		.tab-content>li:first-child {
			display: block;
		}
		
		.tab-title>li.active {
			border-bottom: 4px solid orange;
		}
	</style>

	<body>
		<div class="tab">
			<ul class="tab-title">
				<li class="active">公告</li>
				<li>规则</li>
				<li>安全</li>
				<li>论坛</li>
				<li>公益</li>
			</ul>
			<ul class="tab-content">
				<li>公告-内容</li>
				<li>规则-内容</li>
				<li>安全-内容</li>
				<li>论坛-内容</li>
				<li>公益-内容</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		$(document).ready(function() {

			$(".tab-title>li").mouseenter(function() {
				$(this).addClass("active").siblings("li").removeClass("active");
				var idx = $(this).index();
				$(".tab-content>li").eq(idx).slideDown(10).siblings().slideUp(10);
			});

		});
	</script>

</html>